/**
 * Copyright (c) Enalean, 2017 - 2018. All Rights Reserved.
 *
 * This file is a part of Tuleap.
 *
 * Tuleap is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * Tuleap is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Tuleap. If not, see <http://www.gnu.org/licenses/>.
 */

@import 'angular-artifact-modal/index';
@import 'ng-scrollbar/dist/ng-scrollbar';
@import 'dragular/dist/dragular';

@import 'global-variables';
@import './highlight';

@import 'kanban/socket';
@import 'kanban/edit-kanban';
@import 'kanban/kanban-item';
@import 'kanban/reports-modal';
@import 'kanban/diagram';
@import 'kanban/add-to-dashboard';
@import 'kanban/filter';
@import 'kanban/feedback';

$kanban-column-closed-width: 60px;
$kanban-column-header-height: 50px;
$kanban-column-footer-height: 50px;
$breadcrumb-height: 75px;

@keyframes loadingItems {
    0% {
        opacity: .4;
    }

    100% {
        opacity: .05;
    }
}

.kanban {
    display: flex;
    flex-direction: column;
    height: calc(100vh - #{$navbar-height} - #{$breadcrumb-height});
}

.kanban-header {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: baseline;
    padding: $tlp-spacing $tlp-spacing $tlp-half-spacing;
}

.kanban-header-title {
    margin: 0 $tlp-spacing 0 0;
}

.kanban-header-config {
    display: flex;
    flex: 1 1 auto;
    margin: $tlp-half-spacing 0 0;
}

.kanban-header-report-button {
    margin: 0 0 0 $tlp-half-spacing;
}

.kanban-header-compact-toggler-label {
    display: flex;
    align-items: center;
}

.kanban-header-spacer {
    flex: 10 1 auto;
    margin: 0 $tlp-spacing;
}

.kanban-header-filter-edit-buttons-spacer {
    flex: 1 1 auto;
    margin: $tlp-half-spacing;
}

.kanban-header-search {
    flex: 0 1 auto;
    width: 150px;
    margin: 0 0 0 $tlp-half-spacing;
    background: $tlp-ui-white;
}

.kanban-filtered-info {
    padding: 0 $tlp-spacing $tlp-half-spacing;
}

.kanban-board {
    display: flex;
    flex: 1 1 auto;
}

.kanban-column {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    transition: background 100ms;
    border-bottom: 1px solid $tlp-ui-border-normal;
    border-left: 1px solid $tlp-ui-border-normal;
    background: $tlp-theme-background-color;

    &:hover {
        > add-in-place {
            opacity: 1;
            pointer-events: auto;
        }
    }

    &.archive {
        border-right: 1px solid $tlp-ui-border-normal;
    }

    &.kanban-column-open {
        flex: 1 1 100%;
        min-width: 260px;

        > .kanban-column-label {
            display: none;
        }
    }

    &.kanban-column-closed {
        flex: 1 1 $kanban-column-closed-width;
        min-width: $kanban-column-closed-width;
        overflow: hidden;
        background: $tlp-ui-white;
        cursor: pointer;

        &:hover {
            background: darken($tlp-ui-white, 2%);

            > .kanban-column-header {
                background: darken($tlp-ui-white, 2%);
            }
        }

        > .kanban-column-header {
            justify-content: center;
        }

        > kanban-column {
            position: absolute;
            z-index: 3;
            top: 0;
            left: 0;

            > .kustom-scroll > .ngsb-wrap > .ngsb-container {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
            }
        }
    }

    &.wip-reached {
        background: mix($tlp-ui-warning, $tlp-ui-white, 7%);

        &.kanban-column-closed {
            background: mix($tlp-ui-warning, $tlp-ui-white, 7%);

            > .kanban-column-header {
                background: mix($tlp-ui-warning, $tlp-ui-white, 7%);
            }

            &:hover {
                background: mix($tlp-ui-warning, $tlp-ui-white, 12%);

                // scss-lint:disable NestingDepth
                > .kanban-column-header {
                    background: mix($tlp-ui-warning, $tlp-ui-white, 12%);
                }
            }
        }

        > .kanban-column-header {
            border-bottom-width: 2px;
            border-top-color: $tlp-ui-warning;
            border-bottom-color: $tlp-ui-warning;

            > .kanban-column-header-label,
            > column-wip-header > .kanban-column-header-wip > .kanban-column-header-wip-count,
            > .kanban-column-header-wip-warning,
            > .kanban-column-header-toggle,
            > .kanban-column-label {
                color: $tlp-ui-warning;
            }
        }

        // scss-lint:disable SelectorDepth
        .ngsb-wrap > .ngsb-scrollbar > .ngsb-thumb-container > .ngsb-thumb-pos {
            &:hover > .ngsb-thumb,
            > .ngsb-thumb {
                background: transparentize($tlp-ui-warning, .6);
            }

            &:active {
                background: none;

                // scss-lint:disable NestingDepth
                > .ngsb-thumb {
                    background: darken(transparentize($tlp-ui-warning, .6), 5%);
                }
            }
        }

        > .kanban-column-label {
            opacity: .6;
            color: $tlp-ui-warning;
        }

        .kanban-column-header-wip-count {
            opacity: .6;
        }
    }
}

.kanban-column-header {
    display: flex;
    z-index: 4;
    flex: 0 0 $kanban-column-header-height;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: $kanban-column-header-height;
    max-height: 50px;
    padding: 10px;
    transition: background 100ms;
    border-top: 2px solid $tlp-theme-color;
    border-bottom: 1px solid $tlp-ui-border-normal;
    background: $tlp-ui-white;
}

.kanban-column-header-toggle {
    color: $tlp-theme-color;
    cursor: pointer;
}

.kanban-column-header-wip-warning {
    margin: 0 0 0 10px;
    cursor: help;
}

.kanban-column-header-label {
    flex: 1 1 auto;
    margin: 0 10px;
    overflow: hidden;
    color: $tlp-theme-color;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.kanban-column-header-wip {
    display: flex;
    position: relative;
    z-index: 1000;
    flex: 0 0 auto;
    align-items: center;
}

.kanban-column-header-wip-limit {
    font-size: 13px;

    &.infinity {
        padding: 5px 9px 3px;
    }

    &.editable {
        cursor: pointer;
    }
}

.kanban-column-header-wip-limit-infinite {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
}

.kanban-column-header-wip-count {
    position: relative;
    top: -1px;
    margin: 0 5px 0 0;
    animation: none;
    opacity: .4;
    color: $tlp-theme-color;
    font-size: 28px;
    font-weight: 300;

    &.loading {
        animation: 250ms linear 0s infinite alternate loadingItems;
    }
}

.kanban-column-header-wip-limit-chevron {
    margin: 0 5px 0 0;
    font-size: 11px;
}

.wip-limit-form {
    margin: $tlp-half-spacing $tlp-spacing;
}

.wip-limit-input {
    width: 55px;
}

kanban-column {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.kustom-scroll,
.ngsb-wrap {
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    overflow: hidden;
    transition: none;
}

.kustom-scroll {
    &:not(.has-content),
    &.column-empty {
        .ngsb-wrap > .ngsb-container,
        .kanban-items {
            height: 100%;
        }

        .ngsb-scrollbar {
            opacity: 0;
        }
    }
}

.ngsb-wrap {
    > .ngsb-container {
        left: 10px;
        width: calc(100% - #{$tlp-spacing});
        transition: none;
    }

    > .ngsb-scrollbar {
        top: 10px;
        height: calc(100% - 50px);

        > .ngsb-thumb-container {
            left: -4px;

            > .ngsb-track {
                background: none;
            }

            > .ngsb-thumb-pos {
                // scss-lint:disable NestingDepth
                &:hover > .ngsb-thumb,
                > .ngsb-thumb {
                    width: 6px;
                    border-radius: 0;
                    background: $tlp-ui-border-dark;
                }

                &:active {
                    background: none;

                    > .ngsb-thumb {
                        background: darken($tlp-ui-border-dark, 5%);
                    }
                }
            }
        }
    }
}

.kanban-items {
    margin: 0;
    padding: 0;
}

add-in-place {
    display: flex;
    position: absolute;
    z-index: 1000;
    bottom: 10px;
    left: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    transition: opacity 75ms;
    opacity: 0;
    pointer-events: none;
}

.column-content-addinplace {
    display: flex;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    overflow: visible;
    transition: border-radius 50ms, width 150ms, height 150ms;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .2);

    &.open {
        width: calc(100% - #{$tlp-spacing});
        height: 38px;
        transition: border-radius 50ms, width 150ms, height 150ms;
        border-radius: 4px;

        > .column-content-addinplace-icon {
            display: none;
        }
    }
}

.column-content-addinplace-icon-form {
    width: 100%;
}

.column-content-addinplace-icon-form-input {
    flex: 1 1 auto;
}

.column-content-addinplace-icon-form-save.tlp-append {
    border-radius: 0;
}

.column-content-addinplace-icon {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
}

.kanban-column-label {
    display: flex;
    z-index: 2;
    width: $kanban-column-closed-width;
    transform: scaleX(-1) scaleY(-1);
    opacity: .3;
    color: $tlp-theme-color;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .5px;
    line-height: $kanban-column-closed-width;
    text-transform: uppercase;
    white-space: nowrap;
    writing-mode: tb-rl;
}

.kanban-column-label-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

.kanban-column-label-count {
    display: inline-block;
    margin: 10px 0;
    font-size: 50px;
    font-weight: 300;

    &.loading {
        animation: 250ms linear 0s infinite alternate loadingItems;
    }
}

.widget-kanban-empty-icon {
    color: transparentize($tlp-theme-color, .7);
    font-size: 100px;
}

.widget-context {

    > .kanban-header {
        padding: 0 0 $tlp-spacing;

        > .kanban-header-title {
            display: none;
        }
    }
}

.kanban-header-url {
    margin: 0 $tlp-double-spacing 0 0;
}
